<template>
	<view class="content">

		<image class="bg" src="https://jujing.xinghaoruiye.cn//static/uploads/images/2023/06/19/1687163104649010e094e51.png" mode="scaleToFill"></image>
		<hx-navbar title=" " :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto">
		</hx-navbar>
		<view class="container">
			<view class="settings_item">
				<view class="settings_name">
					手机号
				</view>
				<input type="number" :password="oldPassword" value="" class="value" placeholder-style="color: #93B6D6"
					v-model="mobile" placeholder="请输入账号" />
				<image @click.stop="oldPassword=!oldPassword" class="eye-img"
					:src="oldPassword?'/static/user/eye.png':'/static/user/on-eye.png'" mode="aspectFill"></image>
			</view>

			<view class="settings_item">
				<view class="settings_name">
					验证码
				</view>
				<input type="text" style="flex: 1;padding-right:10rpx" placeholder-style="color: #93B6D6" v-model="code"
					class="value" placeholder="请输入验证码" />
				<!-- @tap="send_before" -->
				<view class="get_code" @tap="sliderVerifyFLag=true" v-if="verification">
					<text>发送验证码</text>
				</view>
				<view class="get_codeing" v-else>
					<text>{{ timer }} 秒后重新获取</text>
				</view>
			</view>

			<view class="settings_item">
				<view class="settings_name">
					新密码
				</view>
				<input type="text" value="" placeholder-style="color: #93B6D6" password="" placeholder='输入6-16位新密码'
					v-model="newPwd" class="value" />
			</view>
			<view class="settings_item">
				<view class="settings_name">
					确认密码
				</view>
				<input type="text" value="" placeholder-style="color: #93B6D6" password="" placeholder='输入6-16位新密码'
					v-model="rePwd" class="value" />
			</view>

		</view>

		<view class="bottom_box">
			<view class="submit_btn" @click="submitHandler()">

				<text>
					立即提交
				</text>
			</view>
		</view>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResultSuccess="verifyResult"
			@touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
		<!-- 		<uni-popup ref="codebox" type="center">
			<view class="code_box">
				<view class="close-btn" @tap="close">
					<n-icon name="roundclose" size="36" color="#000"></n-icon>
				</view>
				<view class="code_title">
					请输入验证码
				</view>
				<view class="code_input">
					<input type="text" class="code_input_style" placeholder-class="code_holder" v-model="tupian_code"
						placeholder="请输入验证码">
					<image :src="code_img" mode="widthFix" class="code_img" @tap="refresh()"></image>
				</view>
				<view class="ok_btn" @tap="sendCode()">
					确定
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPassword: false,
				newPwd: '',
				rePwd: '',
				sex: 0,
				submitStatus: false,
				oldPassword: true,
				mobile: '',
				code: '',
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s
				sliderVerifyFLag: false,
				tupian_code: '',
				code_img: ''
			}
		},
		computed: {

			// 验证手机号
			rightMobile() {
				let res = {};
				if (!this.mobile) {
					res.status = false;
					res.msg = '请输入手机号';
				} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
					res.status = false;
					res.msg = '手机号格式不正确';
				} else {
					res.status = true;
				}
				return res;
			}
		},
		methods: {
			// 滑块验证结果回调函数
			verifyResult(res) {
				this.sliderVerifyFLag = false
				if (res) {
					this.sendCode()
				} else {

				}

			},
			close: function() {
				this.$refs.codebox.close()
			},
			refresh: function() {
				this.$api.getImgCode({}, res => {
					if (res.status) {
						this.code_img = res.data.captcha_image
					}
				})
			},
			send_before: function() {
				if (!this.mobile) {
					this.$common.errorToShow('请输入账号')
					return
				}
				this.$api.getImgCode({}, res => {
					if (res.status) {
						this.code_img = res.data.captcha_image
						this.$refs.codebox.open()
					}
				})

			},
			// 保存资料
			submitHandler() {
				if (this.submitStatus) {
					return false;
				}
				this.submitStatus = true;
				if (this.code === '') {
					this.$common.errorToShow('请输入验证码')
					this.submitStatus = false;
				} else if (this.newPwd === '') {
					this.$common.errorToShow('请输入新密码')
					this.submitStatus = false;
				} else if (this.rePwd === '') {
					this.$common.errorToShow('请输入确认密码')
					this.submitStatus = false;
				} else {
					let data = {
						mobile: this.mobile,
						code: this.code,
						newpwd: this.newPwd,
						repwd: this.rePwd
					};
					this.$api.userForgetPwd(data, res => {
						if (res.status) {
							this.submitStatus = false;
							this.$common.successToShow(res.msg);
							uni.redirectTo({
								url: '/pages/login/login'
							})
						} else {
							this.$common.errorToShow(res.msg)
							this.submitStatus = false;
						}
					}, res => {
						this.submitStatus = false;
					})
				}
			},
			// 发送短信验证码
			sendCode() {
				if (!this.rightMobile.status) {
					this.$common.errorToShow(this.rightMobile.msg);
				} else {
					this.$common.loadToShow('发送中...');
					setTimeout(() => {
						this.$common.loadToHide();
						this.$api.sms({
							mobile: this.mobile,
							code: 'veri',
							captcha: this.tupian_code
						}, res => {
							if (res.status) {
								this.timer = 60;
								this.verification = false;
								this.$common.successToShow(res.msg);
								this.countDown(); // 执行验证码计时
								this.close()
							} else {
								this.$common.errorToShow(res.msg);
							}
						});
					}, 1000);
				}
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer--; // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					});
					if (this.timer <= 0) {
						this.verification = true; // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer);
					}
				}, 1000);
			},
		},
		onLoad: function() {
			let _this = this;
			_this.timer = parseInt(_this.$db.get('timer'));
			if (_this.timer != null && _this.timer > 0) {
				_this.countDown();
				_this.verification = false;
			}
		}
	}
</script>

<style>
	@import url('/pages/user/settings/settings.css');
</style>
